<template>
<!--  {{carList}}-->
  <el-table v-loading="loading" :data="carList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="详情id" align="center" prop="detailsId" />
    <!-- 商品图片列 -->
    <el-table-column label="商品图片" align="center" prop="brandLogo">
      <template #default="{ row }">
        <img :src="row.brandLogo" alt="商品图片" style="width: 50px; height: 50px;" />
      </template>
    </el-table-column>
    <el-table-column label="商品标题" align="center" prop="skuTitle" />
    <el-table-column label="商品单价" align="center" prop="skuPrice" />
    <el-table-column label="商品数量" align="center">
      <template #default="{ row }">
        <el-input-number v-model="row.detailsCount" @change="handleCountChange(row)" :min="1" :max="100" />
      </template>
    </el-table-column>
<!--    <el-table-column label="商品总价" align="center" prop="detailsTotalMoney" />-->
    <el-table-column label="商品总价" align="center">
      <template #default="{ row }">
        {{ calculateTotalPrice(row) }}
      </template>
    </el-table-column>
  </el-table>
  总数量{{num}}<br>
  总金额{{money}}<br>
  <el-button @click="placeOrder" :disabled="data.queryParams.orderButtonDisabled">立即下单(单传)</el-button>
  <el-button @click="placeOrder1" :disabled="data.queryParams.orderButtonDisabled">立即下单(数组传)</el-button>

  <ImageUpload :limit="1" v-model="form.img"></ImageUpload>
</template>

<script setup>
import {shopCarList, uploadImg} from "@/api/shopcar/shopcar.js";
import { useRouter } from 'vue-router'
import {addClientorder, addOrder} from "@/api/clientorder/clientorder.js";
import ImageUpload from "@/components/ImageUpload";
const router=useRouter();
const carList = ref([]);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const orderSn=ref(true);
const num = ref(0); // 定义一个 num 变量来存储总数量
const money = ref(0); // 定义一个 num 变量来存储总数量
const selectedCars = ref([]);
const data = reactive({
  form: {
    ids:[],
    orderSn:null,
    carId:null,
    detailsNum:null,
    detailsMoney:null,
  },
  Order:{
    dtoList:[],
    orderSn:null,
    Count:null,
    TotalMoney:null
  },
  queryParams: {
    loading: false,
    carList: [], // 假设这是你的商品列表数据
    num: 0, // 总数量
    money: 0, // 总金额
    orderButtonDisabled: false // 控制按钮是否禁用的状态
  },
  rules: {
  }
});

const { queryParams, form, Order, rules } = toRefs(data);
function getList() {
  shopCarList().then(response => {
    carList.value = response.data;
  });
}
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  // 计算选中行的数量总和
  num.value = selection.reduce((total, item) => total + item.detailsCount, 0);
  money.value=selection.reduce((total, item) =>total +item.detailsTotalMoney, 0);

  data.queryParams.num=num.value;
  data.queryParams.money=money.value

  data.queryParams.carList=selection;
  selectedCars.value = selection;

  data.Order.dtoList = selection.map(OrderDTO => ({ OrderDTO }));
  console.log(data.Order)
}

function calculateTotalPrice(row){
  const totalPrice = row.detailsCount * row.skuPrice;
  return totalPrice.toFixed(2); // 可以根据需要格式化输出
}
function placeOrder(){
  // 禁用按钮并且延迟0.1秒
  data.queryParams.orderButtonDisabled = true;
  setTimeout(() => {
    data.queryParams.orderButtonDisabled=false
  }, 100);

  // router.push('/clientorder/clientOrder0Details')
  const timestamp = new Date().getTime(); // 获取当前时间戳
  const random = Math.floor(Math.random() * 1000); // 生成一个三位数的随机数
  orderSn.value=`${timestamp}${random}`; // 拼接时间戳和随机数作为订单号

  data.form.ids.push(selectedCars.value.map(car => car.skuId)+"|"+selectedCars.value.map(car=>car.detailsId))
  data.form.carId=JSON.parse(JSON.stringify(selectedCars.value.map(car=>car.carId)))[0]
  data.form.orderSn=orderSn.value
  data.form.detailsNum=num.value
  data.form.detailsMoney=money.value
  console.log(data.form)
  addClientorder(data.form).then(response=>{

  })
  router.push({path: "/clientorder/clientOrderDetails", query:{orderSn:orderSn.value}})
}
function placeOrder1(){
  // router.push('/clientorder/clientOrder0Details')
  const timestamp = new Date().getTime(); // 获取当前时间戳
  const random = Math.floor(Math.random() * 1000); // 生成一个三位数的随机数
  orderSn.value=`${timestamp}${random}`; // 拼接时间戳和随机数作为订单号

  data.Order.orderSn=orderSn.value
  data.Order.Count=num.value
  data.Order.TotalMoney=money.value

  addOrder(data.Order).then(response=>{

  })
  router.push({path: "/clientorder/clientOrderDetails", query:{orderSn:orderSn.value}})
}
function handleCountChange(row){
  // 处理数量变化
  console.log("数量变化", row.detailsCount);
}
getList()
</script>

<style scoped lang="scss">

</style>